<style type="text/css">
.chart { width: 360px; height: 240px; margin-top: 10px}
</style>
<script type="text/javascript" src="/js/echarts.min.js"></script>
<script type="text/javascript">
$(function(){
	var pg = App.base.appInstMonitor.ui, pp = pg.params,
		nv = pg.children('.head');

	nv.seek('back').click(pg.callback);
	
	var memHpChart = echarts.init(pg.seek('memHpChart')[0])
		, memEsChart = echarts.init(pg.seek('memEsChart')[0])
		, memSsChart = echarts.init(pg.seek('memSsChart')[0])
		, memOgChart = echarts.init(pg.seek('memOgChart')[0])
		, memPgChart = echarts.init(pg.seek('memPgChart')[0])
		, cpuChart = echarts.init(pg.seek('cpuChart')[0])
		, thdChart = echarts.init(pg.seek('thdChart')[0])
		, clsChart = echarts.init(pg.seek('clsChart')[0])
		, timeArr = [] , maxLen, asStatus = false;
	
	// 	S0C：S0区容量（S1区相同，略）
	// 	S0U：S0区已使用
	// 	EC：E区容量
	// 	EU：E区已使用
	// 	OC：老年代容量
	// 	OU：老年代已使用
	// 	PC：Perm容量
	// 	PU：Perm区已使用
	// 	YGC：Young GC（Minor GC）次数
	// 	YGCT：Young GC总耗时
	// 	FGC：Full GC次数
	// 	FGCT：Full GC总耗时
	// 	GCT：GC总耗时
	var dim = {
		mem: {
// 			nh: {
// 				txt: '非堆内存使用量', 
// 				data: [
// 					{ txt: '非堆内存使用量', arr: [] }
// 				]
// 			},
// 			cc: {
// 				txt: '内存池 Code Cache', 
// 				data: [
// 					{ txt: 'S0区容量', arr: [] }, //S0C
// 					{ txt: 'S0区已使用', arr: [] } //S0U
// 				]
// 			},
			hp: {
				txt: '堆内存使用量', 
				data: [
					{ txt: '堆内存使用量', arr: [] }
				]
			},
			es: {
				txt: '内存池 Eden Space', 
				data: [
					{ txt: 'E区容量', arr: [] }, //EC
					{ txt: 'E区已使用', arr: [] } //EU
				]
			},
			ss: {
				txt: '内存池 Survivor Space', 
				data: [
					{ txt: 'S0+S1区容量', arr: [] }, // S0C + S1C
					{ txt: 'S0+S1区已使用', arr: [] } // S0U + S1U
				]
			},
			og: {
				txt: '内存池 Old Gen', 
				data: [
					{ txt: '老年代容量', arr: [] }, //OC
					{ txt: '老年代已使用', arr: [] } //OU
				]
			},
			pg: {
				txt: '内存池 Perm Gen', 
				data: [
					{ txt: 'Perm容量', arr: [] }, //PC
					{ txt: 'Perm区已使用', arr: [] }//PU
				]
			}
		},
		cpu: {
			txt: 'CPU使用量',
			data: [
				{ txt: 'CPU使用量', arr: [] }
			]
		},
		thd: {
			txt: '线程数',
			data: [
				{ txt: '线程数', arr: [] }
			]
		},
		cls: { txt: '类个数',
			data: [
				{ txt: '类个数', arr: [] }
			]
		}
	}

	var frm = {
		date: pg.seek('date'),
		hour: pg.seek('hour'),
		minute: pg.seek('minute'),
		second: pg.seek('second'),
		rTime: pg.seek('rTime'), // refresh interval
		tTime: pg.seek('tTime'), // monitor period
		start: pg.seek('start'),
		stop: pg.seek('stop'),
		autoStop: pg.seek('autoStop')
	};
	
	function getValues() {
		return {
			date: pg.seek('date').val(),
			hour: pg.seek('hour').val(),
			minute: pg.seek('minute').val(),
			second: pg.seek('second').val(),
			rTime: pg.seek('rTime').val(),
			tTime: pg.seek('tTime').val(),
			start: pg.seek('start').val()
		}
	}
	
	function lineChart(chart, dd) {
		var ss = $.map(dd.data, function(d) {
			return {
				name: d.txt,
				type: 'line',
				data: d.arr,
				itemStyle: {
					normal: {
						lineStyle: {
							width: 1 //折线宽度,
						}
					}
				}
			};
		});
		//
		chart.setOption({
			grid: { // 控制图的大小
				x: 50,
				y: 40,
				x2: 25,
				y2: 45
			},
			title: {
				text: dd.txt,
				x: 'center',
				y: 'bottom',
				textStyle:{
					color: '#388CD2',
					fontSize: 14
				}
			},
			tooltip: {},
// 			legend: {
// 				width: '320px'
// 				data: [d.txt]
// 			},
			xAxis: {
				boundaryGap: false,
				data: timeArr
			},
			yAxis: {
				type: 'value',
				boundaryGap: false
			},
			series: ss
// 			color:['#388CD2', ]
		});
	}
	
	frm.date.datepicker({
		prevText: "<上一月",
		nextText: "下一月>",
		dateFormat: "yy-mm-dd",
		changeMonth: true,
		changeYear: true,
		inline: true
	});
	frm.date.val(new Date().format('yyyy-MM-dd'));
	frm.hour.val(0);
	frm.minute.val(0);
	frm.second.val(0);
	lineChart(memHpChart, dim.mem.hp);
	lineChart(memEsChart, dim.mem.es);
	lineChart(memSsChart, dim.mem.ss);
	lineChart(memOgChart, dim.mem.og);
	lineChart(memPgChart, dim.mem.pg);
	lineChart(cpuChart, dim.cpu);
	lineChart(thdChart, dim.thd);
	lineChart(clsChart, dim.cls);

	function push(c, dd, vv) {
		var ss = $.map(dd.data, function(d, i) {
			var v = vv[i], a = d.arr;
			if (a.length > maxLen) {
				var x = a.shift();
				delete x;
			}
			a.push(Math.max(0, v));
			return { name: d.txt, data: a };
		});
		c.setOption({
			xAxis: {
				data: timeArr,
				boundaryGap: false,
			},
			series: ss
		});
	}

	var w = mac.wait('Loading...');

	function init(rs) {
		w.close();
		var ro = mac.eval(rs);
		if (!ro.success) {
			return;
		}
		$.extend(pp, ro.data);
		nv.seek('node').text(pp.addr);
// 		nv.seek('title').text(pp.title || pp.addr);

		frm.start.click(function () {
			//
			var rt = frm.rTime.val() * 1000, tt = frm.tTime.val() * 1000;
			maxLen = Math.floor(tt/rt);
			//
			if (frm.autoStop.is(':checked')) {
				var da = frm.date.split('-'), end = new Date(da[0], da[1] - 1, da[2],
					frm.hour.val() * 1, frm.minute.val() * 1, frm.second.val() * 1);
				if (end.getTime() < new Date().getTime() + tt){
					mac.alert('自动停止时间设置过小');
					return;
				}
			}
			//
			mac.confirm('确定要开始吗？', function(){
				clearInterval(App.timer);
				App.timer = setInterval(function() {
					$.get('/soagov/app/inst/stat.do', {
						addr: pp.addr,
						key: pp.key,
						r: new Date().getTime()
					}, function (rs) {
						var ro = mac.eval(rs), d = ro.data;
						if (ro.success) {
							var now = new Date();
							if (timeArr.length >= maxLen) {
								timeArr.shift();
							}
							timeArr.push(now.format('HH:mm:ss'));
							push(memHpChart, dim.mem.hp, [ (d.s0u + d.s1u + d.eu + d.ou + d.pu) / 1024 ]);
							push(memEsChart, dim.mem.es, [ d.ec / 1024, d.eu / 1024 ]);
							push(memSsChart, dim.mem.es, [ (d.s0c + d.s1c) / 1024, (d.s0u + d.s1u) / 1024 ]);
							push(memOgChart, dim.mem.og, [ d.oc / 1024, d.ou / 1024 ]);
							push(memPgChart, dim.mem.pg, [ d.pc / 1024, d.pu / 1024 ]);
							push(cpuChart, dim.cpu, [ d.appCpuUsage ]);
	 						push(thdChart, dim.thd, [ d.runnableThreads ]);
	 						push(clsChart, dim.cls, [ d.classCount ]);
						}
					});
				}, rt);
				frm.start.attr('disabled', 'disabled');
				frm.stop.removeAttr('disabled');
			});
		});
	
		pg.seek('stop').click(function () {
			mac.confirm('确定要停止吗？', function(){
				clearInterval(App.timer);
				frm.stop.attr('disabled', 'disabled');
				frm.start.removeAttr('disabled');
			});
		});
	}
	
	if (pp.id) {
		$.get('/soagov/app/inst/get.do', {
			id: pp.id
		}, init);
	} else if (pp.addr) {
		var a = pp.addr.split(':');
		$.get('/soagov/app/inst/find.do', {
			ip: a[0],
			port: a[1] * 1
		}, init);
	}
	
	function adjust(){
		var h = pg.parent().height();
		pg.height(h);
	}
	$(window).resize(adjust);
	adjust();
});
</script>
<div class="head">
	<span class="a" name="back">返回</span>
	&gt;&gt;
	<span name="node">远程节点</span>
	&gt;&gt;
	<span name="title">应用监控</span>
</div>
<div class="neck">
	<div class="fl">
		<div class="label">
			<span class="fr">刷新时间：</span>
		</div>
		<input type="number" name="rTime" min="3" max="600" value="3"/>
		<span>秒</span>
		<div class="clear"></div>
	</div>
	<div class="fl">
		<div class="label">
			<span class="fr">显示时长：</span>
		</div>
		<input type="number" name="tTime" min="60" max="3600" value="300"/>
		<span>秒</span>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
	<div class="fl">
		<div class="label">
			<div class="fr">
				<input name="autoStop" type="checkbox" />
				<span>自动停止：</span>
			</div>
		</div>
		<input type="text" name="date" class="date10">
		<input name="hour" class="num2" min="00" max="23" value="00" type="number" placeholder="时" />
		<input name="minute" class="num2" min="00" max="59" value="00" type="number" placeholder="分" />
		<input name="second" class="num2" min="00" max="59" value="00" type="number" placeholder="秒" />
		<button name="start">开始</button>
		<button name="stop" disabled>停止</button>
		<button name="reset">重置</button>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>
<div class="body">
	<div class="chart fl" name="memHpChart"></div>
	<div class="chart fl" name="cpuChart"></div>
	<div class="chart fl" name="thdChart"></div>
	<div class="chart fl" name="clsChart"></div>
	<div class="chart fl" name="memEsChart"></div>
	<div class="chart fl" name="memSsChart"></div>
	<div class="chart fl" name="memOgChart"></div>
	<div class="chart fl" name="memPgChart"></div>
	<div class="clear"></div>
</div>